<template>
    <div>
        <div style="margin-left: 10%; margin-right: 10%">
            <Card shadow>
                <center>
                    <div class="cut">
                        <img :src="art.img" class="demo">
                        <div class="vcenter">
                            <div v-if="isMO" style="font-size: large">
                                <h2>{{art.title}}</h2>
                                <span>作者：{{art.author}}</span>
                            </div>
                            <div v-if="!isMO">
                                {{art.title}}
                                <hr class="hr5"/>
                                <span style="font-size: large;">
                                {{art.des}}
                                <br/>
                                作者：{{art.author}}
                                <span style="color: dodgerblue">|</span>
                                    时间：{{art.time}}
                                </span>
                            </div>
                        </div>
                    </div>
                </center>
            </Card>
            <!--        <br/>-->
            <mavon-editor
                    style="z-index: 1"
                    v-model="art.content"
                    :subfield="false"
                    :defaultOpen="'preview'"
                    :toolbarsFlag="false"
                    :editable="false"
                    :scrollStyle="true"
                    :ishljs="true"
                    ref="md"/>
            <Card shadow>
                <Alert :style="!isMO?'font-size: large; width: 100%':'font-size: medium; width: 100%'">
                    <center>
                        标签: {{art.tag}}
                        <Divider type="vertical" v-if="!isMO"/>
                        <br v-if="isMO"/>
                        <br v-if="isMO"/>
                        阅读量：{{art.view}}
                        <br/>
                        <br/>
                        <span>
                            <Icon type="md-alert" color="red"/>
                            未经作者授权，禁止转载
                        </span>
                    </center>
                </Alert>
            </Card>
            <br/>
            <Card>
                <Alert v-if="!login" type="warning" style="width: 190px">评论请先
                    <a href="/" style="text-decoration: none; color: dodgerblue">登录/注册</a>
                </Alert>
                <Button :style="star?'color: red':''" @click="doStar">
                    <strong v-if="!star">star</strong>
                    <strong v-if="star">已点赞</strong>
                    <Divider type="vertical"></Divider>
                    <Icon type="md-star"/>
                    {{art.like}}
                </Button>
                <Divider type="vertical" v-if="login"/>
                <Button type="primary" @click="showM = true" v-if="login">
                    <Icon type="ios-chatbubbles-outline"/>
                    评 论
                </Button>
                <br v-if="login && showM"/>
                <br v-if="login && showM"/>
                <Card :style="!isMO?'margin-left: 2%; width: 300px':'margin-left: 2%;margin-right: 2%;'" v-if="login && showM" dis-hover>
                    <strong>评论</strong>
                    <Button type="text" size="small" style="color: dodgerblue" @click="function() {
                  showM = false; mform.text = '';
                }">取消
                    </Button>
                    <Divider></Divider>
                    <Form @submit.native.prevent="doCo">
                        <FormItem>
                            <Input type="textarea" v-model="mform.text" placeholder="发条友善的评论吧" rows="3">

                            </Input>
                        </FormItem>
                    </Form>
                    <Button :style="!isMO?'width: 120px':'width: 100%'" type="primary" @click="doCo">
                        <Icon type="ios-chatbubbles-outline"/>
                        发 表 评 论
                    </Button>
                </Card>
                <br v-if="login && showM && al1"/>
                <Alert type="error" v-if="al1 && showM" style="margin-left: 2%; margin-right: 2%; width: 140px">请输入内容
                </Alert>
                <Divider></Divider>
                <div v-for="i in co" :key="i.id">
                    <strong>{{i.uid}}</strong> / <span style="font-size: x-small; color: gray">{{i.time}}</span>
                    <br/>
                    <span style="color: black">{{i.text}}</span>
                    <Button size="small" type="text" @click="reply(i.id, i.uid)" v-if="login"><span
                            style="color: dodgerblue; font-size: small">回复</span></Button>
                    <div style="margin-left: 25px">
                        <div v-for="o in rpl" v-if="o.from == i.id" style="margin-top: 5px">
                            <strong>{{o.uid}}</strong> / <span style="font-size: x-small; color: gray">{{o.time}}</span>
                            <br/>
                            <span style="color: gray">@{{o.to}}</span>
                            <span style="color: black">：{{o.text}}</span>
                            <Button size="small" type="text" @click="reply(i.id, o.uid)" v-if="login"><span
                                    style="color: dodgerblue; font-size: small">回复</span></Button>
                        </div>
                    </div>
                    <div v-if="rform.from==i.id">
                        <!--                    <br/>-->
                        <Card :style="!isMO?'margin-left: 2%; width: 300px':'margin-left: 2%; margin-right: 2%'" dis-hover v-if="login && showR">
                            <strong>回复 @{{rform.to}}</strong>
                            <Button type="text" size="small" style="color: dodgerblue" @click="reset">取消回复</Button>
                            <Divider></Divider>
                            <Form @submit.native.prevent="doRpl">
                                <FormItem>
                                    <Input type="textarea" v-model="rform.text" placeholder="发条友善的评论吧" rows="3">

                                    </Input>
                                </FormItem>
                            </Form>
                            <Button :style="!isMO?'width: 120px':'width: 100%'" type="primary" @click="doRpl">
                                <Icon type="ios-chatbubbles-outline"/>
                                回 复
                            </Button>
                        </Card>
                        <br v-if="al2"/>
                        <Alert type="error" v-if="al2" style="margin-left: 2%; margin-right: 2%; width: 140px">请输入内容
                        </Alert>
                    </div>
                    <br/>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Art",
        data() {
            return {
                isMO: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
                haveStar: false,
                star: false,
                al1: false,
                al2: false,
                login: false,
                showM: false,
                showR: false,
                art: '',
                co: '',
                rpl: '',
                styles: {
                    height: 'calc(100% - 55px)',
                    overflow: 'auto',
                    paddingBottom: '53px',
                    position: 'static',
                },
                rform: {
                    from: '',
                    to: '',
                    text: '',
                    uid: '',
                    aid: this.$route.query.id,
                },
                mform: {
                    uid: '',
                    aid: this.$route.query.id,
                    text: ''
                }
            }
        },
        created() {
            this.getArt();
            this.get2();
            const that = this;
            axios.get('/getUser').then(function (resp) {
                if (resp.data) {
                    that.rform.uid = resp.data.id;
                    that.mform.uid = resp.data.id;
                    that.login = true;
                }
            })
        },
        methods: {
            doStar() {
                this.star = true;
                if (!this.haveStar) {
                    const t = this;
                    axios.get('/like?aid=' + this.$route.query.id).then(function () {
                        t.haveStar = true;
                        t.getArt();
                    })
                }
            },
            doCo() {
                const t = this;
                if (t.mform.text) {
                    axios.post('/addc', t.mform).then(function (resp) {
                        t.mform.text = '';
                        t.$Message.success('评论成功');
                        t.al1 = false;
                        t.showM = false;
                        t.get2();
                    })
                } else {
                    this.al1 = true;
                    this.$Message.error('请输入内容');
                }
            },
            reset() {
                this.rform.text = '';
                this.rform.from = '';
                this.rform.to = '';
                this.showR = false;
            },
            doRpl() {
                if (this.rform.text) {
                    const t = this;
                    axios.get('/IDByName?name=' + t.rform.to).then(function (resp) {
                        t.rform.to = resp.data;

                        axios.post('/addr', t.rform).then(function (resp2) {
                            t.get2();
                            t.showR = false;
                            t.rform.text = '';
                            t.rform.from = '';
                            t.rform.to = '';
                            t.$Message.success('回复成功');
                            t.al2 = false;
                        })
                    })
                } else {
                    this.al2 = true;
                    this.$Message.error('请输入内容');
                }
            },
            reply(from, to) {
                if (!this.login) {
                    return false;
                }
                this.rform.to = to;
                this.rform.from = from;
                this.showR = true;
                // console.log(this.rform);
            },
            getArt() {
                const that = this;
                axios.get('/getArticleByID/' + that.$route.query.id).then(function (resp) {
                    that.art = resp.data;
                })
            },
            get2() {
                const that = this;
                axios.get('/queryc/' + that.$route.query.id).then(function (resp) {
                    that.co = resp.data;
                    for (let i = 0; i < that.co.length; i++) {
                        let t = that.co[i].uid;
                        axios.get('/getu/' + t).then(function (resp1) {
                            that.co[i].uid = resp1.data.name;
                        })
                    }
                    // console.log(that.co);
                })
                axios.get('/replyByAID/' + that.$route.query.id).then(function (resp) {
                    that.rpl = resp.data;
                    for (let i = 0; i < that.rpl.length; i++) {
                        let t = that.rpl[i].uid;
                        let o = that.rpl[i].to;
                        axios.get('/getu/' + t).then(function (resp1) {
                            that.rpl[i].uid = resp1.data.name;
                        })
                        axios.get('/getu/' + o).then(function (resp1) {
                            that.rpl[i].to = resp1.data.name;
                        })
                    }
                    // console.log(that.rpl);
                })
            },
        }
    }
</script>

<style scoped>
    .vcenter {
        font-size: 60px;
        position: absolute;
        left: 1%;
        right: 1%;
        top: 40%;
        color: white;
        transform: translateX(-50%);
        transform: translateY(-50%)
    }

    .demo {
        filter: brightness(50%);
        width: 100%;
    }

    .cut {

    }

    /*.hr0{ height:1px;border:none;border-top:1px dashed #1E90FF;}*/
    /*.hr1{ height:1px;border:none;border-top:1px solid #000;}*/
    /*.hr2{ height:3px;border:none;border-top:3px double #6B8E23;}*/
    /*.hr3{ height:5px;border:none;border-top:5px ridge #45D6D8;}*/
    /*.hr4{ height:10px;border:none;border-top:10px groove #FF8C00;}*/
    .hr5 {
        height: 3px;
        border: none;
        border-top: 3px solid dodgerblue;
        width: 10%
    }
</style>